<template>
  <div ref="dsProgress" class="ds-progress bg-gray-100 bg-opacity-10 overflow-hidden">
    <div ref="dsProgressBar" class="ds-progress-bar bg-indigo-500 bg-opacity-30 h-0.5"></div>
  </div>
</template>

<script lang="ts">
import {defineComponent, ref, onMounted, nextTick, inject} from 'vue';
import { Emitter } from 'mitt';

export default defineComponent({
  name: 'DsProgress',
  props: {
    timeout: {
      type: Number,
      default: 0
    }
  },
  setup(props) {
    const { timeout } = props
    const dsProgress = ref<HTMLElement | null>(null)
    const dsProgressBar = ref<HTMLElement | null>(null)
    const emitter = inject<Emitter>('Emitter')

    onMounted(() => {
      if (timeout) {
        dsProgressBar.value?.classList.add('is-moving')
        dsProgressBar.value!.style.animationDuration = timeout + 's'
        dsProgressBar.value?.addEventListener('animationend', (e) => {
          emitter?.emit('update')
          dsProgressBar.value?.classList.remove('is-moving')
          setTimeout(() => {
            dsProgressBar.value?.classList.add('is-moving')
          })
        })
      }
    })
    return {
      dsProgress,
      dsProgressBar,
    }
  },
})
</script>
<style lang="scss">
@keyframes moving  {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
    //animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
  }
}
.is-moving {
  animation-name: moving;
  animation-timing-function: linear;
}
</style>
